<template>

  <el-container>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1" @click="content ='EmpOneselfTrainCourse'">我的培训中心</el-menu-item>
        <el-menu-item index="2" @click="content ='OnlineCoursesStudy'">所有课程</el-menu-item>
        <el-menu-item index="3" @click="content ='EmpOneselfInfo'">我的信息</el-menu-item>
        <div class="titlefont">
          <el-row gutter="20">
            <el-col :span="16"> <span>欢迎您；用户XXXXXXXXXXX</span></el-col>
            <el-col :span="8"><el-link ref="javascriptvoid(0)"  type="primary">退出<i class="el-icon-warning-outline el-icon--right"></i> </el-link></el-col>
          </el-row>
         <!-- <span>欢迎您；用户XXXXXXXXXXX</span>
          <el-link ref="javascriptvoid(0)"  type="primary">退出<i class="el-icon-warning-outline el-icon&#45;&#45;right"></i> </el-link>-->
        </div>
      </el-menu>

    </el-header>
    <el-main>
      <component :is="content"></component>
    </el-main>
  </el-container>

</template>

<script>
    export default {
        name: "TrainingMainPage",
      data() {
        return {
            activeIndex:'1',
            content: 'EmpOneselfTrainCourse'
        };
      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    }
</script>

<style scoped>
  .titlefont{
   float:right;
    margin-right: 40px; /* 靠右40px */
    margin-top:20px ;
    color: white;
  }
  .PageTitile{
    background-color: cornflowerblue;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
</style>
